<template>
		<a-collapse v-model:activeKey="activeKey">
			<a-collapse-panel key="1" header="单词配置项">
				<a-radio-group v-model:value="mode">
					<a-radio value="snapshot">快照生成模式</a-radio>
					<a-radio value="random">实时生成模式</a-radio>
					<a-radio value="input">录入生成模式</a-radio>
				</a-radio-group>
				<a-card  style="width: 90%;margin: auto" v-if="mode === 'input' && step === 1">
					<a-input v-model:value="userInput" placeholder="请输入单词：不同单词使用空格隔开"/>
					<div style="margin-top: 10px;">
						<a-button @click="cancelInput">取消</a-button>
						<a-button type="primary" @click="nextStep" style="margin-left: 10px;">下一步</a-button>
					</div>
				</a-card>
				<a-card style="width: 60%;margin: auto" v-if="mode === 'input' && step === 2">
					<a-input-number  style="width: 100%;margin: auto" v-model:value="articleCount" :min="1" placeholder="请输入生成的文章数量"/>
					<div style="margin-top: 10px;">
						<a-button @click="prevStep">上一步</a-button>
						<a-button type="primary" @click="finish" style="margin-left: 10px;">确认</a-button>
					</div>
				</a-card>
			</a-collapse-panel>
		</a-collapse>
	<div class="word-page">
		<div style="display: flex;">
			<a-card title="今日单词 " style="width: 48%; margin-right: 2%;">
				<a-list item-layout="vertical" :data-source="wordsLeft">
					<template #renderItem="{ item }">
						<a-list-item>
							<a-list-item-meta :description="item.usphone">
								<template #title>
									<a @click="toggleMeaning(item)"  >{{ item.showMeaning ? item.trancn : item.headword }}</a>
								</template>
							</a-list-item-meta>
						</a-list-item>
					</template>
				</a-list>
			</a-card>
			<a-card title="今日单词 " style="width: 48%;">
				<a-list item-layout="vertical" :data-source="wordsRight">
					<template #renderItem="{ item }">
						<a-list-item>
							<a-list-item-meta @click="toggleMeaning(item)" :description="item.usphone">
								<template #title>
									<a>{{ item.showMeaning ? item.trancn : item.headword }}</a>
								</template>
							</a-list-item-meta>
						</a-list-item>
					</template>
				</a-list>
			</a-card>
		</div>
		<div style="text-align: right; margin-top: 20px;">
			<router-link to="/biz/wordarticle">
				<a-button type="primary">进入下一页</a-button>
			</router-link>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import bizCet43Api from "@/api/biz/bizCet43Api";
import {bizWordStore} from "@/store/bizWordStore";

const wordsLeft = ref([]);
const wordsRight = ref([]);
const wordStore = bizWordStore();
let inputDate={
	number: 40,
	wordType: '1',
	isSimple: false,
	fastShotFlag:true,
}
// 获取单词列表
const fetchWords = async () => {
	try {
		bizCet43Api.bizCet43DayWordData(inputDate).then(res => {
			const allWords = res.detailsWordList.map(word => ({
				...word,
				showMeaning: false
			}));
			// 分割数组为两个部分
			wordsLeft.value = allWords.filter((_, index) => index % 2 === 0);
			wordsRight.value = allWords.filter((_, index) => index % 2 !== 0);
			let allWords1 = [];
			for (let i = 0; i < allWords.length; i++) {
				allWords1.push(allWords[i].headword);
			}
			wordStore.setWords(res);

		}).catch(error => {
			console.error('Failed to fetch words:', error);
		});
	} catch (error) {
		console.error('Failed to fetch words:', error);
	}
};

// 切换单词含义的显示状态
const toggleMeaning = (item) => {
	item.showMeaning = !item.showMeaning; // 切换 showMeaning 的值
	if(item.showMeaning) {
		setTimeout(() => {
			item.showMeaning = false;
		}, 3000); // 仅在显示翻译时启动定时器，3秒后自动切回英文单词
	}
};const activeKey = ref(['1']);

const mode = ref('snapshot'); // 默认选择为快照生成模式
const userInput = ref('');
const articleCount = ref(1); // 文章数量，默认值为1
const step = ref(1); // 步骤状态

const cancelInput = () => {
	mode.value = 'snapshot'; // 取消时恢复默认模式
	userInput.value = '';
	step.value = 1; // 重置步骤
};

const nextStep = () => {
	if (userInput.value) {
		step.value = 2;
	}
};

const prevStep = () => {
	step.value = 1;
};

const finish = () => {
	console.log('最终结果:', userInput.value, articleCount.value);
	// 在此处处理完成逻辑，例如提交数据到服务器等
	// 完成后可以重置所有状态或执行其他操作
};
watch(mode, (newMode) => {
	// 清除缓存
	wordStore.setWords(null);
	if (newMode === 'snapshot') {
		inputDate.fastShotFlag=true;
	}
	if (newMode === 'random') {
		inputDate.fastShotFlag=false;
	}
	fetchWords();
});
// 初始化时获取单词列表
onMounted(() => {
	fetchWords();
});
</script>

<style scoped>
.word-page {
	padding: 20px;
}

.ant-card {
	background-color: #f7f7f7;
}

.ant-list-item-meta-title {
	font-weight: bold;
}

.ant-list-item-meta-description {
	color: #555;
}
</style>
